<template>
  <view class="page-container">
    <!-- 表单区域 -->
    <wd-form 
      ref="formRef" 
      :model="formData" 
      class="form-wrapper"
    >
      <wd-cell-group border>
               <FieldFormItem
                 v-for="(field, index) in formFields"
                 :key="index"
                 :type="field.type"
                 :label="field.label"
                 :labelWidth="field.labelWidth || '100px'"
                 :prop="field.prop"
                 :inputType="field.inputType"
                 :clearable="field.clearable"
                 v-model="formData[field.prop]"
                 :placeholder="field.placeholder"
                 :rules="field.rules"
                 :columns="field.columns"
               />
      </wd-cell-group>

      <!-- 提交按钮 -->
      <view class="btn-container">
        <wd-button type="primary" @click="handleSubmit" block>
          保存信息
        </wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import FieldFormItem from '@/components/FieldFormItem/index.vue'

// 表单实例
const formRef = ref(null)

// 表单数据
const formData = reactive({
  username: '',
  phone: '',
  platform: '',
  promotion: ''
})

// 选项数据
const platformList = ref([
  { label: '微信', value: 'wechat' },
  { label: '抖音', value: 'douyin' },
  { label: '小红书', value: 'xiaohongshu' },
  { label: '微博', value: 'weibo' }
])

const promotionList = ref([
  { label: '满减优惠', value: 'discount' },
  { label: '赠品活动', value: 'gift' },
  { label: '限时折扣', value: 'limited' }
])

// ===================== 验证规则 =====================

const phone_validator = (target) => {
	const value=target.value;
	const phoneReg = /^1[3-9]\d{9}$/;
  if (value.length !== 11) {
	   return Promise.reject('请输入11位手机号')
    return Promise.resolve()
  }else if(!phoneReg.test(value)){
	  	   return Promise.reject('手机号不正确')
  }
}

const formFields = [
  // 用户名
  {
    type: 'input',
    label: '用户名',
    prop: 'username',
    inputType: 'text',
    clearable: true,
    placeholder: '请输入用户名',
    rules: [
      { required: true, message: '请输入用户名' }
    ]
  },
  // 联系电话
  {
    type: 'input',
    label: '联系电话',
    prop: 'phone',
    inputType: 'tel',
    clearable: true,
    placeholder: '请输入手机号',
    rules: [
      { 
        required: true, 
        message: '请输入联系电话',
        validator: phone_validator
      }
    ]
  },
  // 推广平台
  {
    type: 'select-picker',
    label: '推广平台',
    prop: 'platform',
    placeholder: '请选择推广平台',
    columns: platformList,
    rules: [
      { required: true, message: '请选择推广平台' }
    ]
  },
  // 优惠方式
  {
    type: 'picker',
    label: '优惠方式',
    prop: 'promotion',
    placeholder: '请选择优惠方式',
    columns: promotionList,
    rules: [
      { required: true, message: '请选择优惠方式' }
    ]
  },
  {
    type: 'upload',
    label: '上传图片',
    prop: 'images',
    action: '/api/upload', // 你的上传接口地址
    imageMode: 'aspectFill',
    rules: [
      { required: true, message: '请上传图片' }
    ]
  }
]
// ===================== 提交逻辑（核心修改） =====================
const handleSubmit = async () => {
    formRef.value
      .validate()
      .then(({ valid, errors }) => {
        if (valid) {
          showSuccess({
            msg: '提交成功'
          })
        }
      })
      .catch((error) => {
        console.log(error, 'error')
      })
}

</script>

<style scoped>
.page-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  /* padding-top: 10px; */
}

.form-wrapper {
  /* padding: 16px; */
}

.btn-container {
  padding: 16px;
  margin-top: 10px;
}

::v-deep .wd-button {
  height: 50px;
  font-size: 16px;
}

/* 移除所有可能的错误提示样式 */
::v-deep .wd-form-item__error {
  display: none !important;
}

::v-deep .wd-input.is-error input {
  border-color: #ddd !important; /* 去掉错误状态的红色边框 */
}
</style>
    